<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<div id="app">
    <teacher></teacher>
    <teacher></teacher>
</div>

<script>

    /*
        全局组件的使用
    *   Vue.component 来创建组件
         组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
    * */

    let teacher = {
        template: `
               <div class="box">
                    <h5>姓名：{{name}}</h5>
                    <h5>年龄：{{age}}</h5>
                     <h5>专业：{{major}}</h5>
                </div>
        `,
        data:function (){
            return{
                name:'tom',
                age:20,
                major:'java'
            }
        }
    }

    // 全局组件的注册
    Vue.component('teacher',teacher)

    let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {},
        components: {
            // teacher
        }
    })
</script>
</body>
</html>